<template>
  <div class='course-detail'>
    <van-nav-bar :title="courseInfo.courseName" left-text="返回" left-arrow
      @click-left="$router.go(-1)">
      <template #right>
        <van-icon name="search" size="18" @click="showShare = true"/>
      </template>
    </van-nav-bar>
    <div class="img-box">
      <img :src="courseInfo.courseImgUrl" alt="">
    </div>
    <div class="middle">
      <div class="course-box">
        <div class="name">{{courseInfo.courseName}}</div>
        <div class="brief">{{courseInfo.brief}}</div>
        <div class="sale"></div>
      </div>
      <div class="content-box">
        <span class="price">￥{{courseInfo.discounts}}</span>
        <span class="tag">{{courseInfo.sales}}人已购</span>
        <span class="tag">{{courseInfo.previewFirstField}}</span>
        <span class="tag">{{courseInfo.previewSecondField||'第二个字段'}}</span>
      </div>
    </div>
    <div class="detail">
      <van-tabs v-model="active" scrollspy sticky>
        <van-tab title="详情">
          <div class="rich-text" v-html="courseInfo.courseDescriptionMarkDown"></div>
        </van-tab>
        <van-tab title="目录">
          <div class="sectionInfo">
            <van-list>
              <div v-for="section in sectionInfo" :key="section.id">
                <van-cell class="section" :title="section.sectionName"></van-cell>
                <van-cell class="lesson"
                v-for="lesson in section.lessonDTOS"
                :key="lesson.id" :title="lesson.theme">
                  <template #right-icon>
                    <van-icon v-if="lesson.isFree" name="play-circle-o"
                    @click="handlePlay(lesson.id)"/>
                    <van-icon v-else name="browsing-history" />
                  </template>
                </van-cell>
              </div>
            </van-list>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="试听"/>
      <van-goods-action-button
        class="buy"
        type="danger"
        text="立即购买"
        @click="handelBuy"
      />
      <van-goods-action-button
        class="vip"
        type="danger"
        text="开通VIP免费学"
      />
    </van-goods-action>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
  </div>
</template>

<script>
// eslint-disable-next-line
import { getCourseById,getSection } from '@/services/course';

export default {
  name: 'CourseDetail',
  props: ['courseId'],
  components: {

  },
  data() {
    return {
      courseInfo: {},
      sectionInfo: {},
      active: 0,
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    };
  },
  watch: {
    courseId(val) {
      console.log(val);
      this.loadCourse();
      this.loadSection();
    },
  },
  computed: {

  },
  methods: {
    async loadCourse() {
      const { data } = await getCourseById(this.courseId);
      if (data.code === '000000') {
        console.log(data);
        this.courseInfo = data.data;
      } else {
        this.$toast('课程信息加载失败');
      }
    },
    async loadSection() {
      const { data } = await getSection(this.courseId);
      if (data.code === '000000') {
        console.log(data);
        this.sectionInfo = data.data;
      } else {
        this.$toast('章节信息加载失败');
      }
    },
    handelBuy() {

    },
    handlePlay(lessonId) {
      this.$router.push({
        name: 'Lesson',
        params: { lessonId },
      });
    },
  },
  created() {
    this.loadCourse();
    this.loadSection();
  },
};
</script>

<style lang='less' scoped>
.img-box {
  height: 290px;
}
.img-box img {
  width: 100%;
  height: 100%;
}
.middle {
  padding: 20px;
  background-color: #fff;
}
.course-box .name {
  font-size: 18px;
  font-weight: 700;
}
.course-box .brief {
  margin-top: 6px;
  font-size: 12px;
  color: #666;
}
.content-box {
  display: flex;
  margin-top: 5px;
  align-items: center;
}
.content-box .price {
  flex: 1;
  align-items: center;
  color: #ff7452;
  font-size: 27px;
}
.content-box .tag {
  padding: 8px;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  height: 12px;
  width: 80px;
  color: #666;
  background-color: rgb(248, 249, 250);
  text-align: center;
  word-break:keep-all;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.detail {
  margin-top: 10px;
  margin-bottom: 50px;
  background-color: #fff;
  font-size: 16px;
}
.detail .rich-text {
  padding: 15px 20px;
}
.detail .section {
  font-size: 16px;
  font-weight: 700;
}
.detail .lesson {
  font-size: 14px;
  color: #333;
}
.van-goods-action {
  border-top: 1px solid rgb(248, 249, 250);
}
.van-goods-action .buy {
  color: #5e3735;
  background: #fcd766;
}
.van-goods-action .vip {
  color: #5e3735;
  background: linear-gradient(295deg,#f2c399,#fde6d0);
}

</style>
